import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:sports_new/controller/team/basketball/lq_team_detail_logic.dart';
import 'package:sports_new/resources/colours.dart';
import 'package:sports_new/resources/styles.dart';
import 'package:sports_new/utils/utils.dart';

import '../../../utils/user.dart';
import '../../../widgets/base/qkd_text.dart';
import '../items/team_focus_button.dart';

class LqTeamDetailPage extends StatefulWidget {
  const LqTeamDetailPage({super.key});

  @override
  State<LqTeamDetailPage> createState() => _LqTeamDetailPageState();
}

class _LqTeamDetailPageState extends State<LqTeamDetailPage>
    with TickerProviderStateMixin {
  int teamId = Get.arguments;
  LqTeamDetailLogic logic =
      Get.put(LqTeamDetailLogic(), tag: '${Get.arguments}');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GetBuilder<LqTeamDetailLogic>(
        tag: teamId.toString(),
        builder: (controller) {
          return Stack(
            children: [
              Column(
                children: [header(), body()],
              ),
              Positioned(
                top: 0,
                left: 0,
                right: 0,
                child: Styles.appBar(
                  systemUiOverlayStyle: const SystemUiOverlayStyle(
                    statusBarIconBrightness: Brightness.light
                  ),
                  backgroundColor: Colours.transparent,
                  leadingColor: Colours.white
                )
              ),
            ],
          );
        }
      ),
    );
  }

  header() {
    return Container(
        width: Get.width,
        height: 250,
        padding: const EdgeInsets.only(top: 96),
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage(Utils.getImgPath('team_header.png')),
                alignment: Alignment.bottomCenter,
                fit: BoxFit.cover)),
        child: Column(
          children: [
            const Spacer(),
            Padding(
              padding: const EdgeInsets.only(
                left: 24,
                right: 30,
              ),
              child: Row(
                children: [
                  logic.data?.logo == null
                      ? Styles.placeholderIcon(width: 54, height: 54)
                      : CachedNetworkImage(
                          imageUrl: logic.data?.logo ?? '',
                          width: 60,
                          height: 60,
                          fit: BoxFit.contain,
                          placeholder: (context, url) =>
                              Styles.placeholderIcon(),
                          errorWidget: (context, url, error) => Image.asset(
                            Utils.getImgPath("lq_placeholder.png"),
                            fit: BoxFit.fitWidth,
                          ),
                        ),
                  const SizedBox(width: 12),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      QkdText(logic.data?.nameZhShort ?? "",
                          color: Colours.white,
                          fontSize: 20,
                          fontWeight: FontWeight.w500
                      ),
                      QkdText(logic.data?.nameEnShort ?? "",
                        color: Colours.white.withOpacity(0.8)
                      ),
                    ],
                  ),
                  const Spacer(),
                  TeamFocusButton.basket(
                    id: logic.teamId,
                    isFocus: logic.data?.isFocus == 1,
                    teamName: logic.data?.nameZhShort,
                    onTap: (value) {
                      logic.getData();
                      Utils.onEvent(
                          "data_match_team_follow",
                          params: {"event_id": logic.teamId, "follow": value}
                      );
                    },
                  )
                ],
              ),
            ),
            const SizedBox(height: 28),
            Row(
              mainAxisSize: MainAxisSize.max,
              children: [
                Flexible(
                    fit: FlexFit.tight,
                    child: Column(
                      children: [
                        QkdText(
                          logic.data?.rankName ?? '-',
                          color: Colours.white,
                          needCenter: true,
                        ),
                        const SizedBox(height: 4),
                        QkdText(
                          logic.data?.rankLeague ?? '-',
                          color: Colours.white.withOpacity(0.6),
                          needCenter: true,
                        )
                      ],
                    )),
                Container(
                    width: 0.5,
                    height: 24,
                    color: Colours.white.withOpacity(0.2)),
                Flexible(
                    fit: FlexFit.tight,
                    child: Column(
                      children: [
                        QkdText(
                          logic.data?.matchResult ?? "",
                          color: Colours.white.withOpacity(0.6),
                          needCenter: true,
                        ),
                        const SizedBox(height: 4),
                        QkdText(
                          '近期状态',
                          color: Colours.white.withOpacity(0.6),
                          needCenter: true,
                        )
                      ],
                    ))
              ],
            ),
            const SizedBox(height: 20)
          ],
        ));
  }

  body() {
    return Expanded(
      child: Container(
        color: const Color(0xFF313545),
        child: Container(
            decoration: const BoxDecoration(
              color: Colours.white,
              borderRadius: BorderRadius.vertical(top: Radius.circular(10))),
            child: logic.tabs.length > 0
                ? Column(children: [
                    SizedBox(
                      height: 40,
                      child: Styles.tabbar(
                          tabs: logic.tabs.map((f) {
                            return QkdText(f);
                          }).toList(),
                          controller: logic.tabController,
                          onTap: (value) {
                            Utils.onEvent('sjpd_qdxq',
                                params: {'sjpd_qdxq': '$value'});
                            // controller.currentIndex = value;
                          },
                          fontSize: 16,
                          // labelPadding: const EdgeInsets.symmetric(horizontal: 13),
                          scrollable: false),
                    ),
                    Expanded(
                        child: TabBarView(
                            controller: logic.tabController,
                            children: List.generate(logic.tabs.length,
                                (index) => logic.pages[index])))
                  ])
                : Container()),
      ),
    );
  }

  Widget focusWidget() {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 16),
      child: GestureDetector(
        onTap: () => User.needLogin(logic.onFocus),
        child: Container(
          height: 24,
          width: 56,
          alignment: Alignment.center,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(4),
              border: Border.all(
                  color: logic.isFocus
                      ? Colours.white.withOpacity(0.6)
                      : Colours.white,
                  width: 0.5)),
          child: QkdText(
            logic.isFocus ? '已关注' : '关注',
            color: logic.isFocus
                ? Colours.white.withOpacity(0.6)
                : Colours.white,
            fontSize: 13,
            needCenter: true,
          ),
        ),
      ),
    );
  }
}
